<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
<script>
// 原始的飞机类
class Plane {
  constructor() {}
  fire() {
    console.log('发射普通子弹');
  }
}
// +导弹和原子弹
class MissileDecorator {
  constructor(plane) {
    this.plane = plane
  }
  fire() {
    this.plane.fire()
    console.log('发射导弹');
  }
}
class AtomDecorator {
  constructor(plane) {
    this.plane = plane
  }
  fire() {
    this.plane.fire()
    console.log('发射原子弹');
  }
}

// let plane = new Plane()
// plane = new MissileDecorator(plane)
// plane = new AtomDecorator(plane)
// plane.fire()

// js的装饰者
let plane = {
  fire() {
    console.log('发射普通子弹');
  }
}
let missileDecorator = function() {
  console.log('发射导弹');
}
let atomDecorator = function() {
  console.log('发射原子弹');
}
let fire1 = plane.fire
plane.fire = function() {
  fire1()
  missileDecorator()
}
let fire2 = plane.fire
plane.fire = function() {
  fire2()
  atomDecorator()
}
plane.fire()



// this被劫持
let _getElementById = document.getElementById;
document.getElementById = function(id) {
  alert(1)
  // return _getElementById(id)
  return _getElementById.apply(document, id)
  // caught TypeError: Illegal invocation at document.getElementById (
}
let button = document.getElementById('button')
</script>
</body>
</html>